feat: added nativewind by jpt1729 · Pull Request #3 · Longhorn-Developers/Longhorn-Studies

jpt1729 · 2026-02-16T23:24:12Z

Added native wind

Copilot

Pull request overview

Adds NativeWind/Tailwind support to the Expo frontend, including required Metro/TypeScript wiring and an example usage in the tabs home screen.

Changes:

Add Tailwind/NativeWind configuration (tailwind.config.js, global.css, metro.config.js, nativewind-env.d.ts, tsconfig.json include update).
Update frontend dependencies to include NativeWind/Tailwind tooling.
Add patch files intended to fix Windows/path-related issues in upstream packages, plus small documentation updates.

Reviewed changes

Copilot reviewed 13 out of 14 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
frontend/tsconfig.json	Includes `nativewind-env.d.ts` for NativeWind TypeScript types.
frontend/tailwind.config.js	Introduces Tailwind config using `nativewind/preset`.
frontend/patches/nativewind.patch	Patch intended to fix path joining in NativeWind’s Metro tailwind integration.
frontend/patches/metro-config.patch	Patch intended to fix dynamic import behavior on Windows for Metro config loading.
frontend/package.json	Adds NativeWind/Tailwind-related deps; adjusts some RN dependency ranges.
frontend/nativewind-env.d.ts	Adds NativeWind type reference file.
frontend/metro.config.js	Adds Metro config integrating NativeWind + Reanimated wrapper.
frontend/global.css	Adds Tailwind directives and a font-face declaration.
frontend/babel.config.js	Adds Babel config for NativeWind integration.
frontend/app/_layout.tsx	Imports `global.css` so NativeWind styles are available.
frontend/app/(tabs)/index.tsx	Adds a small NativeWind `className` example view/text.
frontend/app.json	Sets web bundler to Metro.
frontend/README.md	Adds a short note about using WSL.
README.md	Adds development workflow guidance (branch naming + Conventional Commits).

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

frontend/app/_layout.tsx

Copilot · 2026-03-23T21:40:18Z

frontend/patches/nativewind.patch

+diff --git a/dist/metro/tailwind/v3/index.js b/dist/metro/tailwind/v3/index.js
+index 7e21e741ffedce14ecbe4aa0072412146bfad61e..bed4f97158390d296cba16fae10ae1cdef496c93 100644
+--- a/dist/metro/tailwind/v3/index.js
+++ b/dist/metro/tailwind/v3/index.js
+@@ -3,7 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
+ exports.tailwindCliV3 = void 0;
+ exports.tailwindConfigV3 = tailwindConfigV3;
+ const child_process_1 = require("child_process");
+-const child_file = __dirname + "/child.js";
+const path_1 = require("path");
+const child_file = path_1.join(__dirname, "child.js");
+ const getEnv = (options) => {
+     return {
+         ...process.env,


These patches/*.patch files won’t apply unless the repo is configured to apply them (e.g., add patch-package and a postinstall script, or an equivalent package-manager patch feature). There’s currently no patch tooling/config in the repo, so this patch will be ignored in CI/other machines.

Suggested change

diff --git a/dist/metro/tailwind/v3/index.js b/dist/metro/tailwind/v3/index.js

index 7e21e741ffedce14ecbe4aa0072412146bfad61e..bed4f97158390d296cba16fae10ae1cdef496c93 100644

--- a/dist/metro/tailwind/v3/index.js

+++ b/dist/metro/tailwind/v3/index.js

@@ -3,7 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });

exports.tailwindCliV3 = void 0;

exports.tailwindConfigV3 = tailwindConfigV3;

const child_process_1 = require("child_process");

-const child_file = __dirname + "/child.js";

+const path_1 = require("path");

+const child_file = path_1.join(__dirname, "child.js");

const getEnv = (options) => {

return {

...process.env,

# NOTE: This file previously contained a git patch for nativewind (dist/metro/tailwind/v3/index.js).

# The repository is not configured with any automated patch tooling, so the patch would not be

# applied in CI or other environments. The diff content has been removed to avoid a misleading,

# unused patch file. If a patch is needed in the future, please re-introduce it along with proper

# patch tooling (e.g., patch-package + postinstall) or an equivalent mechanism.

frontend/tailwind.config.js

Copilot · 2026-03-23T21:40:19Z

frontend/package.json

+    "react-native-reanimated": "^4.1.1",
+    "react-native-safe-area-context": "^5.4.0",


The react-native-reanimated range was changed from ~ to ^, and react-native-safe-area-context was both changed to ^ and downgraded (from ~5.6.x to ^5.4.0). With Expo SDK dependencies, using npx expo install and keeping the Expo-resolved versions (typically ~-pinned) avoids subtle incompatibilities at runtime/build time; consider reverting these to the Expo-recommended versions instead of widening/downgrading.

Suggested change

"react-native-reanimated": "^4.1.1",

"react-native-safe-area-context": "^5.4.0",

"react-native-reanimated": "~4.1.1",

"react-native-safe-area-context": "~5.6.0",

Copilot · 2026-03-23T21:40:19Z

frontend/package.json

+    "prettier-plugin-tailwindcss": "^0.5.14",
    "react": "19.1.0",


prettier-plugin-tailwindcss is a formatting tool and shouldn’t ship as a runtime dependency. Move it from dependencies to devDependencies so production installs/build artifacts don’t include it unnecessarily.

Copilot · 2026-03-23T21:40:19Z

frontend/patches/metro-config.patch

+diff --git a/src/loadConfig.js b/src/loadConfig.js
+index 7ac9d88404063ce86d8c15a91ce72c439b455075..2db611b8bd151622faa2cb21e757934815db2775 100644
+--- a/src/loadConfig.js
+++ b/src/loadConfig.js
+@@ -15,6 +15,7 @@ var MetroCache = _interopRequireWildcard(require("metro-cache"));
+ var _os = require("os");
+ var path = _interopRequireWildcard(require("path"));
+ var _yaml = require("yaml");
+var _url = require("url");
+ function _getRequireWildcardCache(e) {
+   if ("function" != typeof WeakMap) return null;
+   var r = new WeakMap(),
+@@ -289,7 +290,8 @@ async function loadConfigFile(absolutePath) {
+       }
+     } catch (e) {
+       try {
+-        const configModule = await import(absolutePath);
+        const importPath = process.platform === 'win32' ? (0, _url.pathToFileURL)(absolutePath).href : absolutePath;
+        const configModule = await import(importPath);
+         config = await configModule.default;
+       } catch (error) {
+         let prefix = `Error loading Metro config at: ${absolutePath}\n`;


Same issue as the other patch: without a configured patch mechanism (patch-package/postinstall, etc.), this patch won’t be applied after install. Please add the patch application tooling/config or remove the patch file.

Suggested change

diff --git a/src/loadConfig.js b/src/loadConfig.js

index 7ac9d88404063ce86d8c15a91ce72c439b455075..2db611b8bd151622faa2cb21e757934815db2775 100644

--- a/src/loadConfig.js

+++ b/src/loadConfig.js

@@ -15,6 +15,7 @@ var MetroCache = _interopRequireWildcard(require("metro-cache"));

var _os = require("os");

var path = _interopRequireWildcard(require("path"));

var _yaml = require("yaml");

+var _url = require("url");

function _getRequireWildcardCache(e) {

if ("function" != typeof WeakMap) return null;

var r = new WeakMap(),

@@ -289,7 +290,8 @@ async function loadConfigFile(absolutePath) {

}

} catch (e) {

try {

- const configModule = await import(absolutePath);

+ const importPath = process.platform === 'win32' ? (0, _url.pathToFileURL)(absolutePath).href : absolutePath;

+ const configModule = await import(importPath);

config = await configModule.default;

} catch (error) {

let prefix = `Error loading Metro config at: ${absolutePath}\n`;

This file previously contained a Metro config patch.

The patch has been removed because there is no configured tooling

(for example, `patch-package` or a postinstall hook) to apply it

automatically after installation.

If you need to reintroduce a patch for Metro, please:

- Add and configure a proper patch application mechanism in the build

or install process, and

- Replace this note with an actual patch only once that mechanism exists.

frontend/app/(tabs)/index.tsx

Copilot · 2026-03-23T21:40:20Z

frontend/app/(tabs)/index.tsx

+          <View className="flex-1 items-center justify-center bg-white">
+      <Text className="text-xl font-bold text-blue-500">
+        Welcome to Nativewind!
+      </Text>
+    </View>


The newly added JSX block’s indentation is inconsistent with surrounding children of ParallaxScrollView, which makes the structure harder to read. Re-indent this block to match the rest of the file’s formatting.

Suggested change

<View className="flex-1 items-center justify-center bg-white">

<Text className="text-xl font-bold text-blue-500">

Welcome to Nativewind!

</Text>

</View>

<View className="flex-1 items-center justify-center bg-white">

<Text className="text-xl font-bold text-blue-500">

Welcome to Nativewind!

</Text>

</View>

Copilot · 2026-03-23T21:40:20Z

frontend/package.json

-    "react-native-web": "~0.21.0"
+    "react-native-web": "~0.21.0",
+    "react-native-worklets": "0.5.1",
+    "tailwindcss": "^3.4.19"


tailwindcss is used for build-time styling generation (NativeWind), not at runtime in the app bundle. Consider moving it to devDependencies to keep runtime dependencies minimal (unless you have a specific production-install requirement).

Co-authored-by: Copilot <[email protected]>

…orn-Studies into feature/nativewind

Co-authored-by: Copilot <[email protected]>

jpt1729 and others added 2 commits February 10, 2026 11:27

feat: added nativewind

ac6742d

feat: updated readme and added styles and theme to nativewind config

5aab8be

DereC4 assigned jpt1729 Mar 8, 2026

pi2chen requested a review from Copilot March 23, 2026 21:36

Copilot started reviewing on behalf of pi2chen March 23, 2026 21:36 View session

Copilot AI reviewed Mar 23, 2026

View reviewed changes

jpt1729 and others added 5 commits March 23, 2026 17:03

Update frontend/app/_layout.tsx

a673303

Co-authored-by: Copilot <[email protected]>

chore: removed patches

7879018

Merge branch 'feature/nativewind' of https://github.com/pi2chen/Longh…

9263422

…orn-Studies into feature/nativewind

Update frontend/app/(tabs)/index.tsx

9b1afc7

Co-authored-by: Copilot <[email protected]>

Update frontend/tailwind.config.js

86fb3ad

Co-authored-by: Copilot <[email protected]>

pi2chen approved these changes Mar 23, 2026

View reviewed changes

pi2chen merged commit 58ace70 into main Mar 23, 2026

pi2chen deleted the feature/nativewind branch March 23, 2026 22:21

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: added nativewind#3

feat: added nativewind#3
pi2chen merged 7 commits intomainfrom
feature/nativewind

jpt1729 commented Feb 16, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI Mar 23, 2026

Uh oh!

Uh oh!

Copilot AI Mar 23, 2026

Uh oh!

Copilot AI Mar 23, 2026

Uh oh!

Copilot AI Mar 23, 2026

Uh oh!

Uh oh!

Copilot AI Mar 23, 2026

Uh oh!

Copilot AI Mar 23, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		"react-native-reanimated": "^4.1.1",
		"react-native-safe-area-context": "^5.4.0",

Conversation

jpt1729 commented Feb 16, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants